<template>
  <div id="timeLineComponent">
    <flow>
      <template v-for='(item,index) in timeLineArr'> 
        <flow-state :title="item" 
                    :is-done='dealProcessNum >= (index+1)'
                    :key='"a"+index'></flow-state>
        
          <flow-line v-if='index < dealProcessNum - 1'
                  :is-done='true' 
                  :key='"b"+index'></flow-line> 
          <flow-line v-else-if='index === dealProcessNum - 1'
                  :is-done='false' 
                  :tip='timeLineTip' 
                  :key='"c"+index'></flow-line>      
          <flow-line v-else-if='index < timeLineArr.length - 1' :key='"d"+index'></flow-line>                   
      </template>
      
    </flow>
  </div>
</template>

<script>
  import { Flow, FlowState, FlowLine } from 'vux'
  export default {
    props:{
      //每个时间点的内容
      timeLineArr:{
        type:Array,
        default:function(){
          return ['选择咨询项','支付订单','补充信息','等待回复'];
        }
      },
      //时间点某个阶段的提示，可自定义内容，建议提示内容不要过长
      timeLineTip:{
        type:String,
        default:''
      },
      //当前处于第几个时间点，默认第一个
      processNumber:{
        type:Number || String,
        default: 1
      }
    },
    components:{Flow, FlowState, FlowLine},
    data:function(){
      return {
        dealProcessNum:1
      }
    },
    created:function(){
      if(this.processNumber > this.timeLineArr.length){
        this.dealProcessNum = this.timeLineArr.length - 1;
        console.warn('processNumber最大为传入的timeLineArr数组的长度-1');
      }else if(this.processNumber < 1){
        this.dealProcessNum = 1;
        console.warn('processNumber最小为1');
      }else{
        this.dealProcessNum = this.processNumber;
      }
    }
  }
</script>

<style lang="less">
  @themeColor: #FDC46F;
  #timeLineComponent{
    background: white;
    .weui-wepay-flow{
      padding: 30px 100px 80px;
      .weui-wepay-flow__li{
        width: 30px;
        height: 30px;
        .weui-wepay-flow__state{
          width: 30px;
          height: 30px;
          border-radius: 50%;
          background: none;
          border: 1px solid #FDC46F;
          box-sizing: border-box;
        }
        .weui-wepay-flow__title-bottom{
          top:46px;
          font-size: 30px;
          color: @themeColor;
        }
      }
      .weui-wepay-flow__li_done{
        .weui-wepay-flow__state{
          background: @themeColor;
        }
      }
      .weui-wepay-flow__line{
        height: 4px;
        background: #dfdfdf;
        .weui-wepay-flow__process{
          height: 4px;
          background: @themeColor;
        }
        // .weui-wepay-flow__info-top{
        //   background: @themeColor;
        //   height: 40px;
        //   line-height: 40px;
        //   font-size: 26px;
        //   bottom: 20px;
        //   &:after{
        //     border-color: @themeColor transparent transparent transparent;
        //     border-width: 16px 8px;
        //     bottom: -30px;
        //   }
        // }
      }
    }
  }
</style>